<template>
  <div class="hello">
    <h1>数据展示</h1>
    <el-button @click="login()">登录</el-button>
    <!-- 表格数据进行分页处理 -->
    <el-table
      :data="
        tableData.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        )
      "
      style="width: 100%"
      height="730"
      stripe
      :row-style="{ background: '#201e33' }"
      :header-cell-style="tableHeaderStyle"
      :cell-style="cellStyle"
    >
      <el-table-column prop="pattern_name" label="策略名称" width="180" fixed>
        <template slot-scope="scope">
          {{ scope.row.pattern_name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="period_type"
        label="策略周期"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.period_type }}
        </template>
      </el-table-column>
      <el-table-column prop="trans_no" label="序号" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.transaction.trans_no }}
        </template>
      </el-table-column>
      <el-table-column
        prop="exchange"
        label="交易所"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.exchange }}
        </template>
      </el-table-column>
      <el-table-column
        prop="symbol"
        label="证券代码"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.symbol }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_order_no"
        label="开仓委托序号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.order_no }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_order_price"
        label="开仓委托价格"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.order_price / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_order_volume"
        label="开仓委托数量"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.order_volume }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_order_time"
        label="开仓委托时间"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{
            (scope.row.transaction.open_order.order_time * 1000) | dateFormat
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_executed_no"
        label="开仓成交序号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.executed_no }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_executed_price"
        label="开仓成交价格"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.executed_price / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_executed_volume"
        label="开仓成交数量"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.executed_volume }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_method"
        label="开仓委托方式"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.method }}
        </template>
      </el-table-column>
      <el-table-column
        prop="open_executed_time"
        label="开仓成交时间"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{
            (scope.row.transaction.open_order.executed_time * 1000) | dateFormat
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_order_no"
        label="平仓委托序号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.open_order.order_no }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_order_price"
        label="平仓委托价格"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.order_price / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_order_volume"
        label="平仓委托数量"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.order_volume }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_order_time"
        label="平仓委托时间"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{
            (scope.row.transaction.close_order.order_time * 1000) | dateFormat
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_executed_no"
        label="平仓成交序号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.executed_no }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_executed_price"
        label="平仓成交价格"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.executed_price / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_executed_volume"
        label="平仓成交数量"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.executed_volume }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_method"
        label="平仓委托方式"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.transaction.close_order.method }}
        </template>
      </el-table-column>
      <el-table-column
        prop="close_executed_time"
        label="平仓成交时间"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{
            (scope.row.transaction.close_order.executed_time * 1000)
              | dateFormat
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="委托状态"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column
        prop="profit_percent"
        label="浮动盈亏%"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ towNumber(scope.row.transaction.profit_percent / 1000) + '%' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="high_or_low_price_since_open"
        label="暂不展示"
        width="120"
        align="center"
        v-if="false"
      >
        <template slot-scope="scope">
          {{ scope.row.high_or_low_price_since_open }}
        </template>
      </el-table-column>
      <el-table-column
        prop="stop_type"
        label="平仓方式"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.stop_type }}
        </template>
      </el-table-column>
      <el-table-column
        prop="stop_profit_value"
        label="目标盈利价"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.stop_profit_value / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="stop_loss_value"
        label="目标止损价"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.stop_loss_value / 1000 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="trans_plan"
        label="暂不展示"
        width="120"
        align="center"
        v-if="false"
      >
        <template slot-scope="scope">
          {{ scope.row.trans_plan }}
        </template>
      </el-table-column>
      <el-table-column
        prop="signal_push_type"
        label="暂不展示"
        width="120"
        align="center"
        v-if="false"
      >
        <template slot-scope="scope">
          {{ scope.row.signal_push_type }}
        </template>
      </el-table-column>
      <el-table-column
        prop="gw_type"
        label="暂不展示"
        width="120"
        align="center"
        v-if="false"
      >
        <template slot-scope="scope">
          {{ scope.row.gw_type }}
        </template>
      </el-table-column>
      <el-table-column
        prop="trigger_method"
        label="暂不展示"
        width="120"
        align="center"
        v-if="false"
      >
        <template slot-scope="scope">
          {{ scope.row.trigger_method }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
// import { encode, decode } from '@/assets/js/base64.js'
import { createSocket } from '../assets/js/websocket.js'
export default {
  data() {
    return {
      //    分页
      currentPage: 1,
      pagesize: 5,
      total: 5
    }
  },
  computed: {
    // 通过vuex全局绑定数组
    tableData() {
      return this.$store.state.data
    }
  },
  methods: {
    // 登录建立websocket连接
    login() {
      createSocket('ws://175.27.243.236:6060/test')
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#201e33;border-color:black;color:#FFFFFF;text-align:center;font-size:16px;font-weight:bold;'
      } else {
        return ''
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 6
      ) {
        return 'height:35px; border-color:black; color:red;text-align:center;font-size:16px;'
      } else if (columnIndex === 5) {
        return 'height:35px; border-color:black; color:#3333ee;text-align:center;font-size:16px;'
      } else {
        return 'height:35px; border-color:black; color:#FFFFFF;text-align:center;font-size:16px;'
      }
    }
  }
}
</script>

<style Lang="less" scoped></style>
